<template>
  <div>
    <ul class="layout-footer">
      <li class="icon1" :class="{'active': activeIndex===0}" @click="gotoUrl(0)">首页</li>
      <li class="icon2" :class="{'active': activeIndex===1}" @click="gotoUrl(1)">数据统计</li>
      <li class="icon3" :class="{'active': activeIndex===2}" @click="gotoUrl(2)">常见问题</li>
      <li class="icon4" :class="{'active': activeIndex===3}" @click="gotoUrl(3)">历史查询</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "footerNav",
  data() {
    return {
    }
  },
  props: {
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  created() {
  },
  methods: {
    gotoUrl: function (index) {
      let url = ["/home", "/stats", "/question", "/list"];
      if (index < 0 || index > 3 || index === this.activeIndex) {
        return;
      }
      this.$router.push({path: url[index]});
    }
  }
}
</script>

<style lang='scss' scoped>
@import "src/css/home";
</style>
